<template>
  <div>
    <form>
      <el-card>
        <!-- 搜索区

        -->
        <el-row :gutter="20">
          <div class="demo-input-size">
            <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-input placeholder="申请人" v-model="queryInfo.applicant"></el-input>
              </div>
            </el-col>
            <el-col :span="4">

            <span class="grid-content bg-purple">

            <el-select slot="prepend" placeholder="处理状态" v-model="queryInfo.status">
              <el-option label="未处理" :value=0></el-option>
              <el-option label="已同意" :value=1></el-option>
              <el-option label="已拒绝" :value=2></el-option>
            </el-select>
            </span>
            </el-col>
            <span class="demonstration"></span>
            <el-date-picker
              v-model="queryInfo.begin"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="申请起始日期">
            </el-date-picker>
            ---
            <span class="demonstration"></span>
            <el-date-picker
              v-model="queryInfo.end"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="申请结束日期">
            </el-date-picker>
            &nbsp; &nbsp;
            <el-button type="primary" @click="query(1,pageSize,queryInfo)">搜索</el-button>

            &nbsp;
            <el-button type="warning" @click="reset">重置</el-button>

          </div>
        </el-row>
        <!--展示区
        -->
        <el-table :data="queryList" border stripe :default-sort="{prop: 'timestamp', order: 'descending'}">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="申请人" prop="applicant"></el-table-column>
          <el-table-column label="场地地点" prop="site"></el-table-column>
          <el-table-column label="预约日期" prop="date"></el-table-column>
          <el-table-column label="预约时间" prop="time"></el-table-column>
          <el-table-column label="申请时间" prop="timestamp" min-width="112px"></el-table-column>
          <el-table-column label="申请原因">
            <template slot-scope="scope">
              {{ scope.row.reason === null ? "暂无原因" : scope.row.reason }}
            </template>
          </el-table-column>
          <el-table-column label="申请状态" min-width="60px">
            <template slot-scope="scope">
              {{ getStatus(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="success" round size="mini"
                         @click="processRequest(scope.row,1)"
                         :disabled="scope.row.status!==0"
              >同意
              </el-button>
              <el-button type="danger" round size="mini"
                         @click="processRequest(scope.row,2)"
                         :disabled="scope.row.status!==0"
              >拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--      分页区-->
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </form>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "MyMessage",
  data() {
    return {
      msg: {},
      pageNum: 1,
      pageSize: 7,
      total: 0,
      queryInfo: {
        status: 0,
        applicant: null,
        begin: null,
        end: null,
      },
      queryList: []


    }
  },
  mounted() {
    this.$emit('show', false);
    this.msg = this.$route.query.msg;
    this.query(1, 7, this.queryInfo)
  },

  methods: {

    getStatus(status) {
      if (status === 0) return "申请中";
      if (status === 1) return "已同意";
      if (status === 2) return "已拒绝";
    },
    processRequest(row, status) {
      row.status = status;
      this.$emit('send', {data: row})
    },


    query(pageNum, pageSize, queryInfo) {
      axios.get("/admin/ask", {
        params: {
          pageNum, pageSize, queryInfo
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.queryList = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.$message.error("查询失败")
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleCurrentChange() {
      this.query(this.pageNum, this.pageSize, this.queryInfo)
    },
    reset() {
      this.queryInfo.status = null
      this.queryInfo.applicant = null
      this.queryInfo.begin = null
      this.queryInfo.end = null
    },
  }


}
</script>

<style scoped>

</style>
